// 该文件为根组件 相当于vue 脚手架中的App.vue
// 其他组件要想显示在页面中,需要将其他组件引入到该组件中使用

// 引入该App.js 组件的样式
import { Component } from 'react';
import './App.css';

// 函数根组件写法
// function App() {
//   return (
//     <div className="App">

//     </div>
//   );
// }

// export default App;

// 类根组件的写法
// 导入函数组件
// import Myfun from './views/funcom/Myfun';
// 导入类组件
// import Mycls from './views/classcom/Mycls';
// import Mycls1 from './views/classcom/Mycls1';

// 导入state 中的类组件
// import Mycls from './views/state/Mycls';
// import Mycls1 from './views/state/Mycls1';
// import Mycls2 from './views/state/Mycls2';
// import Mycls3 from './views/state/Mycls3';
// import Father from './views/slot/Father';
// import Father from './views/propstype/Father';
// import Father from './views/lifecycle/Father';
// import Father from './views/lifecycle/componentdidupdate/Father';
// import Father from './views/lifecycle/componentwillunmount/Father';
// import Father from './views/lifecycle/getDrivedsattefromprops/Father';
// import Father from './views/lifecycle/shouldcomponentupdate/Father';
// import Father from './views/lifecycle/getsnapshortbeforeupdate/Father';
// import Father from './views/form/Father';
// import Father1 from './views/form/Father1';
// import Father from './views/FathertoSon/Father';
// import Father from './views/sontofather/Father';
// import Grandfather from './views/kuaji/Grandfather';
// import Father from './views/brothertobrother/Father';
// import Father1 from './views/hoc/Father1';
// import Grandfather from './views/hoc-demo/Grandfather';
// import Father from './views/hoc/Father';
// import Father from './views/store-view/Father';
// import Father from './views/store-view-thunk/Father';
// import Father from './views/store-react-redux/Father';
// import User from './views/store-modules/User';
// import Shop from './views/store-modules/Shop';

// import Father from './views/router-view/Father';
// import Father from './views/router-view01/Father';
// import Father from './views/router-view02/Father';
// import Father from './views/router-view03/Father';
// import Father from './views/css-in-js/Father';
// import Father from './views/proxy-view/Father';
// ----------------------------hooks ------------------------------------
// import Father from './views/hooks-view/usestatehooks/Father';
// import Father from './views/hooks-view/useeffectview/Father';
// import Fatherdemo from './views/hooks-view/useeffectview/Fatherdemo';
// import Father from './views/hooks-view/userefview/Father';
// import Father from './views/hooks-view/usecontextview/Father';
// import Father from './views/hooks-view/redux-view/Father';
// import Father from './views/hooks-view/routerhookview/Father';
// import Father from './views/hooks-view/usememoview/Father';

// import Father from './views/hooks-view/memoview/Father';
// import Father from './views/hooks-view/usecallbackview/Father';
// import Father from './views/hooks-view/usereducerview/Father';
// import Father from './views/hooks-view/uselayouteffectview/Father';
// import Father from './views/hooks-view/useidview/Father';
// import Father from './views/hooks-view/usedefferedvalue-view/Father';
// import Father from './views/hooks-view/myhook-view/Father';
// import Father1 from './views/hooks-view/myhook-view/Father1';
// import Father from './views/store-rtk-view/Father';
import Father from './views/store-rtk-modules-view/Father';

class App extends Component {
  render() {
    const username = '云冈石窟-北魏-大有不同';
    const username1 = '龙门石窟-洛阳'
    return (
      <div className='App'>
        <p>我是根组件</p>
        {/* 函数组件 */}
        {/* <Myfun username1={username1}></Myfun> */}
        {/* 使用类组件 */}
        {/* <Mycls username={username}></Mycls> */}
        {/* 使用类组件 */}
        {/* <Mycls1></Mycls1> */}
        {/* <Mycls></Mycls> */}
        {/* <Mycls1></Mycls1> */}
        {/* <Mycls2></Mycls2> */}
        {/* <Mycls3></Mycls3> */}
        {/* <Father></Father> */}
        {/* <Father1></Father1> */}
        {/* <Father></Father> */}
        {/* <Grandfather></Grandfather> */}
        {/* <Father1></Father1> */}
        {/* <Father></Father> */}
        {/* <Grandfather></Grandfather> */}
        {/* <Father></Father> */}
        {/* <User></User> */}
        {/* <Shop></Shop> */}
        {/* <Fatherdemo></Fatherdemo> */}
        {/* <Father1></Father1> */}
        <Father></Father>
      </div>
    )
  }
}

export default App